<template>
	<view class="index-page" :style="{'padding-top': navHeight}">
		<view class="content">
			<view class="item" v-for="(item, index) in lists" :key="index" @click="goPage(item.url)">
				<image :src="item.icon" mode="aspectFit"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '../../../components/navbar/index.vue';
	import {
		oldImgBaseUrl
	} from "../../../utils/baseUrl.js"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				navHeight: '',
				lists: []
			}
		},
		// 对公众号跳转进行登录
		onLoad(options) {

		},
		onShow() {
			if (uni.getStorageSync('fastArr')) {
				this.lists = uni.getStorageSync('fastArr')
			} else {
				this.lists = [{
						title: '车辆监控',
						icon: oldImgBaseUrl + "ic_big_home_2.png",
						url: '/pages/vehicle/home/index'
					}, {
						title: '车辆轨迹',
						icon: oldImgBaseUrl + "ic_big_home_5.png",
						url: '/pages/vehicle/track/index'
					}, {
						title: '实时监控',
						icon: oldImgBaseUrl + "ic_big_home_4.png",
						url: '/pages/vehicle/video/realTime'
					}, {
						title: '历史录像',
						icon: oldImgBaseUrl + "ic_big_home_8.png",
						url: '/pages/vehicle/video/history'
					}, {
						title: '人员监控',
						icon: "/static/navIcon/icon_operator.png",
						url: '/pages/operator/home/index'
					}

				]
			}
		},
		methods: {
			goPage(url) {
				if (url == 'code') {
					uni.scanCode({
						onlyFromCamera: true,
						success: (res) => {

						}
					});
				} else {
					uni.navigateTo({
						url
					})
				}
			},
		}
	}
</script>

<style scoped>
	.index-page {
		min-height: 100vh;
		background: #F5F5F5;
		box-sizing: border-box;
	}

	.r-icon {
		width: 42rpx;
		height: 34rpx;
		margin-top: 10rpx;
		margin-right: 24rpx;
	}

	.content {
		padding: 24rpx 24rpx 0 24rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.item {
		width: 340rpx;
		height: 248rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		border: 1px solid #E5E5E6;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.item:nth-child(7),
	.item:nth-child(8) {
		margin-bottom: 0;
	}

	.item image {
		width: 78rpx;
		height: 78rpx;
		margin-bottom: 36rpx;
	}
</style>